<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="../common/global.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/safe/aywmq_qt.js"></script>
    <%--<script type="text/javascript" src="js/safe/da_opt.js"></script>--%>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/safe/css.css"/>
    <link rel="stylesheet" href="css/safe/common.min.css"/>
    <link rel="stylesheet" href="css/safe/ms-style.min.css"/>
    <link rel="stylesheet" href="css/safe/personal_member.min.css"/>
    <link rel="stylesheet" href="css/safe/Snaddress.min.css"/>
    <link rel="stylesheet" href="css/my_common.css"/>
    <%--<link rel="stylesheet" href="css/bootstrap.min.css"/>--%>
    <%--<script type="text/javascript" src="js/sui.js"></script>--%>

    <style>
        .chang_headImg {
            left: 32%;
            top: 125px;
            width: 500px;
            position: absolute;
        }

        .chang_headImg img {
            padding-left: 15px;
        }

        .chang_headImg a:focus {
            -webkit-border-radius: 35px;
            -moz-border-radius: 35px;
            border-radius: 35px;
            border: 2px solid orangered;
        }

        #update_pic_a {
            font-weight: 800;
        }

        #update_pic_a:hover {
            color: lightcoral;
        }

        a:hover {
            text-decoration: none;
        }
    </style>
</head>
<body class="ms-body">
<jsp:include page="user_center_header.jsp"></jsp:include>

<div id="ms-center" class="personal-member">
    <div class="cont">

        <jsp:include page="left_menu.jsp"></jsp:include>

        <div class="cont-main">
            <div class="main-wrap mt15">
                <h3>
                    <span style="height: 20px; width: 2px;background: orangered;float: left;top: 10px;position: absolute;"></span>
                    <strong style="margin-left: 10px;font-size: 20px;">个人信息</strong>
                </h3>
                <div class="user-profile clearfix">

                    <div class="user-profile-wrap">

                        <div class="profile-avatar">
                            <img src="${user.headImg}" height="120" id="head_pic" width="120">
                            <a href="javascript:;" onclick="update_headImg();" id="update_pic_a">修改头像</a>
                            <div class="edit_bg" id="update_pic_a_bg"></div>
                        </div>
                    </div>


                    <div class="control-group clearfix">
                        <label class="control-label" style="font-size: 18px;">个性签名：</label>
                        <div class="controls lh26" style="margin-left: 14px;">
                            <c:choose>
                                <c:when test="${empty user.signature}">
                                    <span style="font-size: 16px;color: grey;">未添加</span>
                                    <button id="add_signature" class="btn3">添加个性签名+</button>
                                </c:when>
                                <c:otherwise>
                                    <span style="font-size: 16px;color: dodgerblue;"
                                          id="signature_val">${user.signature}</span>
                                    <button id="change_signature" class="btn3">修改个性签名</button>
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <div style="display: none;" id="signature_div">
                            <textarea placeholder="输入自己的个性签名！"
                                      style="width: 340px; height: 100px;margin-left: 30px;font-size: 16px;border: 2px solid pink;border-radius: 8px;padding: 4px;"
                                      maxlength="200" id="signature_area"></textarea>
                            <button class="btn" onclick="saveSignature();">确定</button>
                            <button class="btn" id="cancel">取消</button>
                        </div>
                    </div>

                    <input type="file" id="inputFile" name="inputFile" style="display: none;"/>
                    <%--<input type="text" readonly id="inputFileAgent" size="6"/>--%>
                    <input type="button" class="btn2" value="上传头像+" onclick="chang_headImg()" style="display: none;"
                           id="up_headImg"/>

                    <div class="chang_headImg" id="select_headImg" style="display: none;">
                        <div>
                            <a href="javascript:;"><img style="height: 57px;width: 62px;"
                                                        src="images/headImg/1.png" id="1_pic"
                                                        onclick="changePic('1_pic');"></a>
                            <a href="javascript:;"><img style="height: 57px;width: 62px;"
                                                        src="images/headImg/2.png" id="2_pic"
                                                        onclick="changePic('2_pic');"></a>
                            <a href="javascript:;"><img style="height: 57px;width: 62px;"
                                                        src="images/headImg/3.png" id="3_pic"
                                                        onclick="changePic('3_pic');"></a>
                            <a href="javascript:;"><img style="height: 57px;width: 62px;"
                                                        src="images/headImg/4.png" id="4_pic"
                                                        onclick="changePic('4_pic');"></a>
                        </div>
                        <div>
                            <a href="javascript:;"><img style="height: 57px;width: 62px;"
                                                        src="images/headImg/5.png" id="5_pic"
                                                        onclick="changePic('5_pic');"></a>
                            <a href="javascript:;"><img style="height: 57px;width: 62px;"
                                                        src="images/headImg/6.png" id="6_pic"
                                                        onclick="changePic('6_pic');"></a>
                            <a href="javascript:;"><img style="height: 57px;width: 62px;"
                                                        src="images/headImg/7.png" id="7_pic"
                                                        onclick="changePic('7_pic');"></a>
                            <a href="javascript:;"><img style="height: 57px;width: 62px;"
                                                        src="images/headImg/8.png" id="8_pic"
                                                        onclick="changePic('8_pic');"></a>
                            <button class="btn" onclick="save_headImg();">保存</button>
                            <button class="btn" onclick="cancel();">取消</button>
                        </div>

                    </div>
                </div>


                <div class="form-list tab-switch personal-wrap-show">
                    <form id="update_user_info">
                        <div class="control-group clearfix">
                            <label class="control-label"><em>*&nbsp;</em>昵称：</label>

                            <span style="margin-left: 16px;font-size: 16px;" id="nickName_span">${user.nickName}</span>

                            <input style="margin-left: 16px;display: none;" type="text" class="text" maxlength="25"
                                   value="${user.nickName}" name="nickName" id="nickName_input">

                        </div>

                        <div class="control-group clearfix">
                            <label class="control-label"><em>*&nbsp;</em>性别：</label>
                            <span style="margin-left: 16px;font-size: 16px;" id="gender_span">${user.gender}</span>
                            <div id="gender" class="controls" style="margin-left: 16px;display: none;">
                                <label class="sex-label">
                                    <input type="radio" name="gender"
                                           <c:if test="${user.gender=='男'}">checked</c:if> value="男">
                                    <span>男</span>
                                </label>
                                <label class="sex-label">
                                    <input type="radio" name="gender"
                                           <c:if test="${user.gender == '女'}">checked</c:if> value="女">
                                    <span>女</span>
                                </label>
                            </div>
                        </div>

                        <div class="control-group clearfix">
                            <label class="control-label"><em>*&nbsp;</em>手机号：</label>
                            <div class="controls lh26" style="margin-left: 16px;font-size: 16px;">
                                <c:choose>
                                    <c:when test="${empty user.phone}">
                                        <span>未绑定</span>
                                        <a href="#">绑定手机号>></a>
                                    </c:when>
                                    <c:otherwise>
                                        <span><%=phone%></span>
                                        <a href="pages/user_center/update_phone1.jsp">修改手机号>></a>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                        <div class="control-group clearfix">
                            <label class="control-label"><em>*&nbsp;</em>邮箱：</label>
                            <div class="controls lh26" style="margin-left: 16px;font-size: 16px;">
                                <c:choose>
                                    <c:when test="${empty user.email}">
                                        <span>未绑定</span>
                                        <a href="#">绑定邮箱>></a>
                                    </c:when>
                                    <c:otherwise>
                                        <span><%=email%></span>
                                        <a href="pages/user_center/update_email1.jsp">修改邮箱>></a>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                        <div class="control-group clearfix">
                            <label class="control-label">生日：</label>
                            <span style="margin-left: 16px;font-size: 16px;" id="birthday_span">${user.birthday}</span>
                            <div class="controls" style="margin-left: 16px;display: none;" id="birthday">
                                <select id="year" onchange="changeDay()" name="year" style="color: #000;">
                                </select><span style="font-weight: bolder;font-size: 15px;">年</span>&nbsp;&nbsp;&nbsp;

                                <select id="month" onchange="changeDay()" name="month" style="color: #000;">
                                </select><span style="font-weight: bolder;font-size: 15px;">月</span>&nbsp;&nbsp;&nbsp;

                                <select id="day" name="day" style="color: #000;">
                                </select><span style="font-weight: bolder;font-size: 15px;">日</span>&nbsp;&nbsp;&nbsp;
                            </div>
                        </div>
                        <div class="control-group clearfix priority-high">
                            <label class="control-label"><em>*&nbsp;</em>居住地址：</label>

                            <c:choose>
                                <c:when test="${empty user.liveAddress}">
                                    <span style="margin-left: 16px;font-size: 16px;">未填写</span>
                                </c:when>
                                <c:otherwise>
                                    <span style="margin-left: 16px;font-size: 16px;"
                                          id="live_address_spane">${user.liveAddress}</span>
                                </c:otherwise>
                            </c:choose>

                            <div class="controls" style="margin-left: 16px;display: none;" id="live_address">
                                <select id="province" onchange="changeCitys()" name="province" style="color: #000;">
                                </select>&nbsp;&nbsp;
                                <select id="city" name="city" style="color: #000;">
                                </select>&nbsp;&nbsp;
                                <div class="error-place ml0"></div>
                            </div>
                        </div>

                        <div class="control-group clearfix priority-high">
                            <label class="control-label">详细地址：</label>

                            <c:choose>
                                <c:when test="${empty user.detailLiveAddress}">
                                    <span style="margin-left: 16px;font-size: 16px;">未填写</span>
                                </c:when>
                                <c:otherwise>
                                    <span style="margin-left: 16px;font-size: 16px;"
                                          id="live_address_spane">${user.detailLiveAddress}</span>
                                </c:otherwise>
                            </c:choose>

                            <div class="controls" style="margin-left: 16px;display: none;" id="detail_live_address">
                                <p class="adress-detail">
                                    <input type="text" class="text" maxlength="70" name="detail_address">
                                    <span class="tips-words"></span>
                                </p>
                                <div class="error-place ml0"></div>
                            </div>

                        </div>

                        <div class="control-group clearfix priority-low">
                            <label class="control-label">&nbsp;</label>
                            <input type="button" class="ms-stand-btn1" value="编辑" id="update_btn"
                                   onclick="updateInfo();"/>
                            <div style="float:left;display: none;" id="submit_div">
                                <input type="submit" class="ms-stand-btn1" value="保存" id="save_btn"/>
                                <input type="button" class="ms-stand-btn1" value="取消" id="cacel_btn"
                                />
                            </div>
                            <div class="error-place"></div>
                            <div class="error-place mt29"></div>
                        </div>
                    </form>
                </div>

            </div>
        </div>


    </div>
</div>
<div class="clear"></div>
<div class="ng-footer">
			<textarea class="footer-dom" id="footer-dom-02">
			</textarea>
    <div class="ng-fix-bar"></div>
</div>


<style type="text/css">
    .ng-footer {
        height: 130px;
        margin-top: 0;
    }

    .ng-s-footer {
        height: 130px;
        background: none;
        text-align: center;
    }

    .ng-s-footer p.ng-url-list {
        height: 25px;
        line-height: 25px;
    }

    .ng-s-footer p.ng-url-list a {
        color: #666666;
    }

    .ng-s-footer p.ng-url-list a:hover {
        color: #f60;
    }

    .ng-s-footer .ng-authentication {
        float: none;
        margin: 0 auto;
        height: 25px;
        width: 990px;
        margin-top: 5px;
    }

    .ng-s-footer p.ng-copyright {
        float: none;
        width: 100%;
    }

    .root1200 .ng-s-footer p.ng-copyright {
        width: 100%;
    }
</style>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/province_city_json.js"></script>
<script type="text/javascript" src="js/user_center/update_info.js"></script>
<%--<script type="text/javascript" src="js/safe/ms_common.min.js"></script>--%>
<script type="text/javascript" src="js/initBirthSelect.js"></script>
<script type="text/javascript" src="js/initLiveAddress.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>

<script type="text/javascript">

    $("#cacel_btn").click(function () {

        layer.confirm('确定放弃编辑？',

            {
                btn: ['确定', '取消'] //按钮
            },

            function (index) {
                layer.msg('已取消！', {icon: 1});
                changShow();
                return true;
            },
            function (index) {
                return true;
            }
        );
    });

    // function changeAgentContent() {
    //     $("#inputFileAgent").val($("#inputFile").val());
    // }
    function chang_headImg() {
        $("#inputFile").click();
    }

    /** 上传图片 **/
        //获取上传按钮
    var upload = document.getElementById("inputFile");
    if (typeof FileReader === 'undefined') {
        //result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        upload.setAttribute('disabled', 'disabled');
    } else {
        upload.addEventListener('change', readFile, false);
    }

    function readFile() {
        var file = this.files[0]; //获取上传文件列表中第一个文件
        if (!/image\/\w+/.test(file.type)) {
            //图片文件的type值为image/png或image/jpg
            showErrorDialog("文件必须为图片！")
            return false;
        }

        var reader = new FileReader(); //实例一个文件对象
        reader.readAsDataURL(file); //把上传的文件转换成url
        // 当文件读取成功便可以调取上传的接口
        reader.onload = function (e) {
            $("#head_pic").attr("src", this.result);
        }
    };
</script>
<script type="text/javascript" src="js/user_center/center.js"></script>

<script>
    $(function () {

        // 初始化出生日期下拉框
        // function initBirthSelect() {

        var birthday = "${user.birthday}";
        var birthdays = birthday.split("-");

        // var date = new Date();
        // var currentYear = date.getFullYear(); // 当前年份
        // var currentMonth = date.getMonth() + 1; // 当前月份
        // var currentDay = date.getDate(); // 当前日

        // 初始化年份下拉框(1900--2100)
        initYearSelect(birthdays[0]);
        // 初始化月份下拉框
        initMonthSelect(birthdays[1]);
        // 初始化天数下拉框
        initDaySelect(birthdays[0], birthdays[1], birthdays[2]);
        // }


        // // 初始化省份下拉框和市区下拉框
        // function initProvinceSelect() {
        var provinceSelect = $("#province"); // 省份下拉框
        var citySelect = $("#city"); // 市区下拉框
        var provinceStr = "<option>--请选择省份--</option>"; // 省份拼接字符串
        var cityStr = "<option>--请选择市区--</option>"; // 市区拼接字符串
        var liveAddr = "${user.liveAddress}";

        var index = -1;
        if (liveAddr.indexOf("省") != -1) {
            index = liveAddr.indexOf("省");
        } else if (liveAddr.indexOf("区") != -1) {
            index = liveAddr.indexOf("区");
        } else if (liveAddr.indexOf("市") != -1) {
            index = liveAddr.indexOf("市");
        }
        var liveProvince = liveAddr.substr(0, index + 1);
        var liveCity = liveAddr.substr(index + 1);

        // 遍历所有的省份
        for (var i = 0; i < provinces.length; i++) {
            // 获得省份对象
            var province = provinces[i];
            // 获得该省份名称
            var provinceName = province.provinceName;

            // 判断provinceName是否为空
            if (provinceName == "") {
                // 为空，跳过此次循环
                continue;
            }
            if (provinceName == liveProvince) {
                // 拼接各省份
                provinceStr += "<option selected='selected'>" + provinceName + "</option>";
            } else {
                // 拼接各省份
                provinceStr += "<option>" + provinceName + "</option>";
            }

            cityStr = cityInit(province, liveCity, cityStr);
        }

        provinceSelect.html(provinceStr); // 将provinceStr写入html
        citySelect.html(cityStr); // 将cityStr写入html
        // }
    });

    function cityInit(province, liveCity, cityStr) {
        // 获得该省份下的所有城市
        var citys = province.citys; // 数组

        // 遍历所有的城市
        for (var index in citys) {
            // 获得城市对象
            var city = citys[index];
            // 获得该城市名称
            var cityName = city.citysName;

            // 判断cityName是否为空
            if (cityName == "") {
                // 为空，跳过此次循环
                continue;
            }

            if (cityName == liveCity) {
                // 拼接各城市
                cityStr += "<option selected='selected'>" + cityName + "</option>";
            } else {
                // 拼接各城市
                cityStr += "<option>" + cityName + "</option>";
            }
        }
        return cityStr;
    }

    $("#my_info").click(function () {
        $("#acount").addClass("nav-manage selected");
    });

</script>
</body>

</html>